<template>
    <div>
        <div>
            <div class="empTool">
                <div class="empSearch">
                    <el-input placeholder="请输入员工名"
                              prefix-icon="el-icon-search"
                              v-model="empName"
                              :disabled="showAdvanceSearchVisible"
                              @keydown.enter.native="initEmps"
                              @clear="initEmps" clearable>
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" :disabled="showAdvanceSearchVisible" @click="initEmps">搜索</el-button>
                    <el-button type="primary" @click="showSearchTool">
                        <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up' : 'fa fa-angle-double-down' " aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                    <el-upload action="/employee/basic/import"
                               :headers="headers"
                               style="display: inline-flex;margin-right: 8px;"
                               :show-file-list="false"
                               :before-upload="beforeUpload"
                               :on-success="onSuccess"
                               :on-error="onError"
                               :disabled="importDataDisabled">
                        <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">
                            {{importDataBtnText}}
                        </el-button>
                    </el-upload>
                    <el-button type="success" icon="el-icon-download" @click="exportData">
                        导出数据
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
                </div>
            </div>
        </div>

        <transition name="slide-fade">
            <div class="empSearchTool" v-show="showAdvanceSearchVisible">
                <el-row>
                    <el-col :span="5">
                        政治面貌:
                        <el-select size="mini" style="width: 130px;" v-model="searchValue.politicId" placeholder="请选择">
                            <el-option v-for="item in politicsstatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        民族:
                        <el-select size="mini" style="width: 130px" v-model="searchValue.nationId" placeholder="民族">
                            <el-option v-for="item in nations" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位:
                        <el-select size="mini" style="width: 130px" v-model="searchValue.posId" placeholder="职位">
                            <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称:
                        <el-select size="mini" style="width: 130px" v-model="searchValue.jobLevelId" placeholder="职称">
                            <el-option v-for="item in joblevels" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        聘用形式:
                        <el-radio-group v-model="searchValue.engageform">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 8px">
                    <el-col :span="5">
                        所属部门:
                        <el-popover placement="bottom" title="所属部门" width="200" trigger="manual" v-model="visible2">
                            <el-tree :data="allDeps" :props="defaultProps" @node-click="searchDepNodeClick" default-expand-all></el-tree>
                            <div class="depInputSearch" slot="reference" @click="showDepView2">
                                {{searchDepName}}
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期:
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                size="mini"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button size="mini">取消</el-button>
                        <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>

        <div class="empTable">
            <el-table :data="emps" style="width: 100%" v-loading="loading" stripe border>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="name" label="姓名" align="left" width="90" fixed></el-table-column>
                <el-table-column prop="workId" label="工号" align="left" width="85"></el-table-column>
                <el-table-column prop="gender" label="性别" align="left" width="50"></el-table-column>
                <el-table-column prop="birthday" label="出生日期" align="left" width="95"></el-table-column>
                <el-table-column prop="idCard" label="身份证号码" align="left" width="150"></el-table-column>
                <el-table-column prop="wedlock" label="婚姻状况" align="left" width="70"></el-table-column>
                <el-table-column prop="nation.name" label="民族" align="left" width="50"></el-table-column>
                <el-table-column prop="nativePlace" label="籍贯" align="left" width="80"></el-table-column>
                <el-table-column prop="politicsStatus.name" label="政治面貌" align="left" width="100"></el-table-column>
                <el-table-column prop="email" label="电子邮件" align="left" width="180"></el-table-column>
                <el-table-column prop="phone" label="电话号码" align="left" width="100"></el-table-column>
                <el-table-column prop="address" label="联系地址" align="left" width="220"></el-table-column>
                <el-table-column prop="department.name" label="所属部门" align="left" width="100"></el-table-column>
                <el-table-column prop="position.name" label="职位" align="left" width="100"></el-table-column>
                <el-table-column prop="engageForm" label="聘用形式" align="left" width="100"></el-table-column>
                <el-table-column prop="tiptopDegree" label="学历" align="left" width="80"></el-table-column>
                <el-table-column prop="school" label="毕业院校" align="left" width="150"></el-table-column>
                <el-table-column prop="specialty" label="专业" align="left" width="150"></el-table-column>
                <el-table-column prop="workState" label="在职状态" align="left" width="70"></el-table-column>
                <el-table-column prop="beginDate" label="入职日期" align="left" width="95"></el-table-column>
                <el-table-column prop="conversionTime" label="转正日期" align="left" width="95"></el-table-column>
                <el-table-column prop="beginContract" label="合同起始日期" align="left" width="95"></el-table-column>
                <el-table-column prop="endContract" label="合同截止日期" align="left" width="95"></el-table-column>
                <el-table-column label="合同期间" align="left" width="95">
                    <template slot-scope="scope">
                        {{scope.row.contractterm}} 年
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showEditEmpView(scope.row)">编辑</el-button>
                        <el-button type="primary" size="mini">查看高级资料</el-button>
                        <el-button type="danger" size="mini" @click="deletedEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="display: flex;justify-content: flex-end"
                    background
                    layout="sizes, prev, pager, next,jumper,->,total"
                    :total="total"
                    @current-change="currentChange"
                    @size-change="sizeChange">
            </el-pagination>
        </div>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" >
            <span>
                <el-form ref="empForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名:" prop="name">
                                <el-input size="mini" style="width: 150px;" prefix-icon="el-icon-edit" v-model="emp.name" placeholder="请输入员工姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="gender">
                                <el-radio-group v-model="emp.gender" style="margin-top: 8px;">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期:" prop="birthday">
                                <el-date-picker size="mini" style="width: 150px;" v-model="emp.birthday" type="date" value-format="yyyy-MM-dd" placeholder="出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="政治面貌:" prop="politicId">
                                <el-select size="mini" style="width: 200px;" v-model="emp.politicid" placeholder="请选择">
                                    <el-option v-for="item in politicsstatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族:" prop="nationId">
                                 <el-select size="mini" style="width: 150px" v-model="emp.nationid" placeholder="民族">
                                    <el-option v-for="item in nations" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯:" prop="nativePlace">
                                <el-input size="mini" style="width: 120px;" prefix-icon="el-icon-edit" v-model="emp.nativeplace" placeholder="请输入籍贯"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="mini" style="width: 150px;" prefix-icon="el-icon-edit" v-model="emp.email" placeholder="请输入电子邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input size="mini" style="width: 200px;" prefix-icon="el-icon-edit" v-model="emp.address" placeholder="请输入联系地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                             <el-form-item label="职位:" prop="posId">
                                 <el-select size="mini" style="width: 150px" v-model="emp.posid" placeholder="职位">
                                    <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职称:" prop="jobLevelId">
                                 <el-select size="mini" style="width: 120px" v-model="emp.joblevelid" placeholder="职称">
                                    <el-option v-for="item in joblevels" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属部门:" prop="departmentId">
                                <el-popover placement="bottom" title="所属部门" width="200" trigger="manual" v-model="visible">
                                    <el-tree :data="allDeps" :props="defaultProps" @node-click="handleDepNodeClick" default-expand-all></el-tree>
                                    <div class="depInput" slot="reference" @click="showDepView">
                                        {{inputDepName}}
                                    </div>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input size="mini" style="width: 200px;" prefix-icon="el-icon-phone" v-model="emp.phone" placeholder="请输入电话号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号:" prop="workId">
                                <el-input size="mini" style="width: 150px;" prefix-icon="el-icon-edit" v-model="emp.workid" placeholder="请输入工号" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="tiptopDegree">
                                 <el-select size="mini" style="width: 120px" v-model="emp.tiptopdegree" placeholder="学历">
                                    <el-option v-for="item in tiptopdegrees" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校:" prop="school">
                                <el-input size="mini" style="width: 150px;" prefix-icon="el-icon-edit" v-model="emp.school" placeholder="请输入学校"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业:" prop="specialty">
                                <el-input size="mini" style="width: 200px;" prefix-icon="el-icon-edit" v-model="emp.specialty" placeholder="请输入专业名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="入职日期:" prop="beginDate">
                                <el-date-picker size="mini" style="width: 145px;" v-model="emp.begindate" type="date" value-format="yyyy-MM-dd" placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="转正日期:" prop="conversionTime">
                                <el-date-picker size="mini" style="width: 145px;" v-model="emp.conversiontime" type="date" value-format="yyyy-MM-dd" placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同起始日期:" prop="beginContract">
                                <el-date-picker size="mini" style="width: 135px;" v-model="emp.begincontract" type="date" value-format="yyyy-MM-dd" placeholder="合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同截止日期:" prop="endContract">
                                <el-date-picker size="mini" style="width: 135px;" v-model="emp.endcontract" type="date" value-format="yyyy-MM-dd" placeholder="合同截止日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号码:" prop="idCard">
                                <el-input size="mini" style="width: 180px;" prefix-icon="el-icon-edit" v-model="emp.idcard" placeholder="请输入身份证号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="聘用形式:" prop="engageForm">
                                <el-radio-group v-model="emp.engageform" style="margin-top: 8px;">
                                    <el-radio label="劳动合同">劳动合同</el-radio>
                                    <el-radio label="劳务合同">劳务合同</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况:" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock" style="margin-top: 8px;">
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EmpBase",
        data(){
            return{
                emps:[],
                allDeps:[],
                empName:'',
                inputDepName:'',
                searchDepName:'',
                title:'',
                total:0,
                currentPage:1,
                size:10,
                loading:false,
                dialogVisible:false,
                visible:false,
                visible2:false,
                importDataBtnText:'导入数据',
                importDataBtnIcon:'el-icon-upload2',
                importDataDisabled:false,
                showAdvanceSearchVisible:false,
                headers:{
                    Authorization:window.sessionStorage.getItem('tokenStr')
                },
                emp:{
                    id:null,
                    name:'',
                    gender:'',
                    birthday:'',
                    idCard:'',
                    wedlock:'',
                    nationId:null,
                    nativePlace:'',
                    politicId:null,
                    email:'',
                    phone:'',
                    address:'',
                    departmentId:null,
                    jobLevelId:null,
                    posId:null,
                    engageForm:'',
                    tiptopDegree:'',
                    specialty:'',
                    school:'',
                    beginDate:'',
                    workState:'在职',
                    workId:'',
                    contractTerm:null,
                    conversionTime:'',
                    notWorkDate:null,
                    beginContract:'',
                    endContract:'',
                    workAge:null,
                    salaryId:null
                },
                searchValue:{
                    politicId:null,
                    nationId:null,
                    posId:null,
                    jobLevelId:null,
                    engageForm:'',
                    departmentId:null,
                    beginDateScope:null
                },
                defaultProps:{
                    children:'children',
                    label:'name'
                },
                nations:[],
                jobLevels:[],
                politicsStatus:[],
                positions:[],
                tiptopDegrees: ['博士','硕士','本科','大专','高中','初中','小学','其他'],
                rules:{
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请选择员工性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '请选择出生日期', trigger: 'blur'}],
                    idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'},{
                        pattern:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message:'身份证号码不正确',
                        trigger: 'blur'
                    }],
                    wedlock: [{required: true, message: '请选择婚姻状态', trigger: 'blur'}],
                    nationId: [{required: true, message: '请选择民族', trigger: 'blur'}],
                    nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
                    politicId: [{required: true, message: '请选择政治面貌', trigger: 'blur'}],
                    email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},{
                        type:'email',
                        message: '邮箱地址不正确',
                        trigger: 'blur'
                    }],
                    phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                    address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请选择部门', trigger: 'blur'}],
                    jobLevelId: [{required: true, message: '请选择职称', trigger: 'blur'}],
                    posId: [{required: true, message: '请选择职位', trigger: 'blur'}],
                    engageForm: [{required: true, message: '请选择聘用形式', trigger: 'blur'}],
                    tiptopDegree: [{required: true, message: '请选择学历', trigger: 'blur'}],
                    specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
                    school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
                    beginDate: [{required: true, message: '请选择入职日期', trigger: 'blur'}],
                    workState: [{required: true, message: '请选择工作状态', trigger: 'blur'}],
                    workId: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    contractTerm: [{required: true, message: '请选择合同期限', trigger: 'blur'}],
                    conversionTime: [{required: true, message: '请选择转正日期', trigger: 'blur'}],
                    notWorkDate: [{required: true, message: '请选择离职日期', trigger: 'blur'}],
                    beginContract: [{required: true, message: '请选择合同起始日期', trigger: 'blur'}],
                    endContract: [{required: true, message: '请选择合同结束日期', trigger: 'blur'}],
                    workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
            this.initPositions();
        },
        methods:{
            initEmps(type){
                this.loading = true;
                //高级搜索
                let url = '/employee/basic/?currentPage='+this.currentPage+'&size='+this.size;
                if (type && type == 'advanced'){
                    if (this.searchValue.politicid){
                        url += '&politicId='+this.searchValue.politicid;
                    }
                    if (this.searchValue.nationid){
                        url += '&nationId='+this.searchValue.nationid;
                    }
                    if (this.searchValue.posid){
                        url += '&posId='+this.searchValue.posid;
                    }
                    if (this.searchValue.joblevelid){
                        url += '&jobLevelId='+this.searchValue.joblevelid;
                    }
                    if (this.searchValue.engageform){
                        url += '&engageForm='+this.searchValue.engageform;
                    }
                    if (this.searchValue.departmentid){
                        url += '&departmentId='+this.searchValue.departmentid;
                    }
                    if (this.searchValue.beginDateScope){
                        url += '&beginDateScope='+this.searchValue.beginDateScope;
                    }
                }else {
                    //普通搜索
                    url += '&name='+this.empName;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp){
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            },
            initData(){
                //民族下拉框
                if (!window.sessionStorage.getItem('nations')){
                    this.getRequest('/employee/basic/nation').then(resp => {
                        if (resp){
                            this.nations = resp;
                            window.sessionStorage.setItem('nations',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.nations = JSON.parse( window.sessionStorage.getItem('nations'));
                }
                //职称下拉框
                if (!window.sessionStorage.getItem('jobLevels')){
                    this.getRequest('/employee/basic/job').then(resp => {
                        if (resp){
                            this.joblevels = resp;
                            window.sessionStorage.setItem('jobLevels',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.joblevels = JSON.parse( window.sessionStorage.getItem('joblevels'));
                }
                //政治面貌下拉框
                if (!window.sessionStorage.getItem('politicsStatus')){
                    this.getRequest('/employee/basic/politicsStatus').then(resp => {
                        if (resp){
                            this.politicsstatus = resp;
                            window.sessionStorage.setItem('politicsStatus',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.politicsstatus = JSON.parse( window.sessionStorage.getItem('politicsStatus'));
                }
                //部门树形控件
                if (!window.sessionStorage.getItem('allDeps')){
                    this.getRequest('/employee/basic/deps').then(resp => {
                        if (resp){
                            this.allDeps = resp;
                            window.sessionStorage.setItem('allDeps',JSON.stringify(resp));
                        }
                    })
                }else{
                    this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
                }
            },
            initForm(){
                //初始化表单
                this.emp = {
                    emp:{
                        id:null,
                        name:'',
                        gender:'',
                        birthday:'',
                        idCard:'',
                        wedlock:'',
                        nationId:null,
                        nativePlace:'',
                        politicId:null,
                        email:'',
                        phone:'',
                        address:'',
                        departmentId:null,
                        jobLevelId:null,
                        posId:null,
                        engageForm:'',
                        tiptopDegree:'',
                        specialty:'',
                        school:'',
                        beginDate:'',
                        workState:'在职',
                        workId:'',
                        contractTerm:null,
                        conversionTime:'',
                        notWorkDate:null,
                        beginContract:'',
                        endContract:'',
                        workAge:null,
                        salaryId:null
                    }
                }
            },
            //因职位有可能变动，故不放入sessionStorage
            initPositions(){
                this.getRequest('/employee/basic/position').then(resp => {
                    if (resp){
                        this.positions = resp;
                    }
                })
            },
            //获取工号
            getMaxWorkId(){
                this.getRequest('/employee/basic/maxWorkID').then(resp => {
                    this.emp.workId = resp.object;
                })
            },
            //改变页码
            currentChange(currentPage){
                this.currentPage = currentPage;
                if (this.searchValue){
                    let type = 'advanced';
                    this.initEmps(type);
                }else{
                    this.initEmps();
                }
            },
            //改变显示条数
            sizeChange(size){
                this.size = size;
                if (this.searchValue){
                    let type = 'advanced';
                    this.initEmps(type);
                }else{
                    this.initEmps();
                }
            },
            //显示添加员工页面
            showAddEmpView(){
                this.initForm();
                this.getMaxWorkId();
                this.initPositions();
                this.inputDepName = '';
                this.title = '添加员工';
                this.dialogVisible = true;
            },
            showSearchTool(){
                this.showAdvanceSearchVisible = !this.showAdvanceSearchVisible;
                this.searchValue = {
                    searchValue:{
                        politicId:null,
                        nationId:null,
                        posId:null,
                        jobLevelId:null,
                        engageForm:'',
                        departmentId:null,
                        beginDateScope:null
                    }
                };
            },
            //显示部门页面
            showDepView(){
                //开关
                this.visible = !this.visible;
            },
            //高级搜索-部门树状图
            showDepView2(){
                //开关
                this.visible2 = !this.visible2;
            },
            handleDepNodeClick(data){
                this.inputDepName = data.name
                this.emp.departmentId = data.id
                //开关
                this.visible = !this.visible;
            },
            //高级搜索-部门点击事件
            searchDepNodeClick(data){
                this.searchDepName = data.name;
                this.searchValue.departmentid = data.id;
                //开关
                this.visible2 = !this.visible2;
            },
            //编辑员工
            showEditEmpView(data){
                this.initForm();
                this.initPositions();
                this.title = '编辑员工';
                this.emp = data;
                this.inputDepName = data.department.name;
                this.dialogVisible = true;
            },
            //保存按钮
            doAddEmp(){
                if (this.emp.id){
                    this.$refs['empForm'].validate(valid => {
                        if (valid){
                            this.putRequest('/employee/basic/',this.emp).then(resp => {
                                if (resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            });
                        }
                    })
                }else{
                    this.$refs['empForm'].validate(valid => {
                        if (valid){
                            this.postRequest('/employee/basic/',this.emp).then(resp => {
                                if (resp){
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            });
                        }
                    })
                }

            },
            //删除员工
            deletedEmp(data){
                this.$confirm('此操作将永久删除该员工:'+ data.name +', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/employee/basic/' + data.id).then(resp =>{
                        if (resp){
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            exportData(){
                this.downloadRequest('/employee/basic/export');
            },
            //导入数据按钮状态钩子
            beforeUpload(){
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataBtnText = '正在导入';
                this.importDataDisabled = true;
            },
            onSuccess(){
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
                this.initEmps();
            },
            onError(){
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
            },
        }
    }
</script>

<style>
    .empTool{
        display: flex;
        justify-content: space-between;
    }
    .empSearch .el-input{
        width: 400px;
        margin-right: 10px;
    }
    .empTable{
        margin-top: 10px;
    }
    .depInput{
        width: 150px;
        height: 24px;
        display: inline-flex;
        border: 1px solid #dedede;
        border-radius: 5px;
        cursor:pointer;
        align-items: center;
        font-size: 13px;
        padding-left: 8px;
        box-sizing: border-box;
    }
    .depInputSearch{
        width: 130px;
        height: 24px;
        display: inline-flex;
        border: 1px solid #dedede;
        border-radius: 5px;
        cursor:pointer;
        align-items: center;
        font-size: 13px;
        padding-left: 8px;
        box-sizing: border-box;
    }
    .empSearchTool{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 5px;
        margin: 10px 0px;
    }
    /**css动画过渡**/
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>